<template>
  <!-- 异常品通知单表单弹窗 -->
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="1200px"
      draggable
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="formData" :inline="true">
        <h4 class="mb-[20px] mt-[0px]">基本数据</h4>
        <div>
          <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            size="large"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">异常通知单号</div>
              </template>
              {{ formData.noticeCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任部门</div>
              </template>
              {{ formData.liableDepartmentName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">状态</div>
              </template>
              {{ useDictionary("reworkStatus", formData.status) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">设备</div>
              </template>
              {{ formData.equipName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">产品型号</div>
              </template>
              {{ formData.productCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">产品名称</div>
              </template>
              {{ formData.productName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">批次号</div>
              </template>
              {{ formData.batchNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">异常数量</div>
              </template>
              {{ formData.abnormalNum }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">比例%</div>
              </template>
              {{ formData.ratio }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
        <div class="formTable2">
          <el-table
            :data="formData.details"
            style="width: 100%"
            :key="Math.random"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            />
            <el-table-column label="问题描述" props="describes" min-width="150">
              <template #default="{ $index, row }">
                {{ row.describes }}
              </template>
            </el-table-column>
            <el-table-column label="问题要求" props="demand" min-width="150">
              <template #default="{ $index, row }">
                {{ row.demand }}
              </template>
            </el-table-column>
            <el-table-column label="问题实际" props="actual" min-width="150">
              <template #default="{ $index, row }">
                {{ row.actual }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <h4 class="mb-[20px] mt-[20px]">履历</h4>

        <div class="formTable2">
          <el-table
            :data="formData.viewDetails"
            style="width: 100%"
            :key="Math.random"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="80"
            />
            <el-table-column
              label="时间"
              props="viewTime"
              min-width="90"
              align="center"
            >
              <template #default="{ $index, row }">
                {{ row.viewTime }}
              </template>
            </el-table-column>
            <el-table-column
              label="部门"
              props="departmentName"
              min-width="120"
              align="center"
            >
              <template #default="{ $index, row }">
                {{ row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column
              label="执行人"
              props="viewUserName"
              min-width="50"
              align="center"
            >
              <template #default="{ $index, row }">
                {{ row.viewUserName }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              props="viewStatus"
              min-width="80"
              align="center"
            >
              <template #default="{ $index, row }">
                {{ useDictionary("reworkStatus", row.viewStatus) }}
              </template>
            </el-table-column>
            <el-table-column label="意见" props="viewContent" min-width="180">
              <template #default="{ $index, row }">
                {{ row.viewContent }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              props="action"
              min-width="50"
              align="center"
            >
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="openLogDetail(scope.row)"
                  ><i-ep-search />
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <el-dialog
    v-model="detailVisible"
    :title="detailTitle"
    width="1200px"
    draggable
    @close="closeDetailDialog"
  >
    <el-descriptions
      class="margin-top"
      title=""
      :column="3"
      size="large"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">部门</div>
        </template>
        {{ detailData.departmentName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">执行人</div>
        </template>
        {{ detailData.viewUserName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">执行时间</div>
        </template>
        {{ detailData.viewTime }}
      </el-descriptions-item>
    </el-descriptions>

    <h4 class="mb-[20px] mt-[20px]">批复意见</h4>
    <el-row>
      <el-col :span="24">
        <el-form-item label="" prop="viewContent" style="width: 99%">
          <el-input
            type="textarea"
            style="width: 100%"
            :disabled="true"
            v-model="detailData.viewContent"
            placeholder=""
            :rows="4"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <h4 class="mb-[20px] mt-[20px]">附件</h4>
    <el-form-item label="" prop="files">
      <CommonUploadFile
        :showText="false"
        :is-read="true"
        :key="uploadKey"
        :files="detailData.files || []"
      />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDetailDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import useEvent from "@/utils/useEvent";
import { useDictionary } from "../../../utils/useTable"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "OPENREWORKABNORMALDUTYNOTICEVIEW",
  inheritAttrs: false,
});

const { eventBusEmit, eventBusOn } = useEvent();
const emit = defineEmits(["reset-table", "change-visible","update-visible"]);

const props = defineProps({
  visible: { type: Boolean, default: false },
});

// 用计算属性中转
const dialogVisible = computed({
  get: () => props.visible,
  set: (v) => emit("update-visible", v),
});

const uploadKey = ref(Math.random());
const title = ref("异常品通知详情");
const detailVisible = ref(false);
const detailTitle = ref("详情附件");
const detailData = reactive({});
const detailDataInit = reactive({
  id: "",
  version: "",
  noticeId: "",
  departmentCode: "",
  departmentName: "",
  departmentId: "",
  viewStatus: "",
  viewType: "",
  viewContent: "",
  viewTime: "",
  viewUserName: "",
  viewUserId: "",
  files: [],
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
});
const data = reactive({});

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  version: "",
  status: "",
  workStatus: "",
  noticeCode: "",
  noticeDate: "",
  noticeDepartmentCode: "",
  noticeDepartmentName: "",
  noticeDepartmentId: "",
  noticeUserId: "",
  noticeUserName: "",
  liableDepartmentId: "",
  liableDepartmentName: "",
  viewContent: "",
  viewUserName: "",
  viewTime: "",
  viewStatus: "",
  equipId: "",
  equipCode: "",
  equipName: "",
  productId: "",
  productCode: "",
  productName: "",
  materialNo: "",
  batchNo: "",
  abnormalNum: "",
  judgeUserName: "",
  judgeUserId: "",
  judgeTime: "",
  ratio: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  viewDetails: [],
  details: [
    {
      id: "",
      version: "",
      noticeDocId: "",
      describes: "",
      demand: "",
      actual: "",
      remarks: "",
      createTime: "",
      createdUserId: "",
      createdUserName: "",
      lastUpdateTime: "",
      lastUpdatedUserId: "",
      lastUpdatedUserName: "",
      enabled: "",
      deleted: "",
    },
  ],
});

const isValidated = ref(false);

const details = {
  id: "",
  version: "",
  noticeDocId: "",
  describes: "",
  demand: "",
  actual: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
};

const viewDetails = {
  id: "",
  version: "",
  noticeId: "",
  departmentCode: "",
  departmentName: "",
  departmentId: "",
  viewStatus: "",
  viewType: "",
  viewContent: "",
  viewTime: "",
  viewUserName: "",
  viewUserId: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
};

/** 关闭表单弹窗 */
function closeDialog() {
  dialogVisible.value = false;
  emit("change-visible", false);
  uploadKey.value = Math.random();
  resetForm();
}
/** 关闭表单弹窗 */
function closeDetailDialog() {
  detailVisible.value = false;
  Object.assign(detailData, detailDataInit);
}
/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.details = [JSON.parse(JSON.stringify(details))];
  formData.viewDetails = [JSON.parse(JSON.stringify(viewDetails))];
  formData.id = "";
  formData.version = "";
  formData.status = "";
  formData.workStatus = "";
  formData.noticeCode = "";
  formData.noticeDate = "";
  formData.noticeDepartmentCode = "";
  formData.noticeDepartmentName = "";
  formData.noticeDepartmentId = "";
  formData.noticeUserId = "";
  formData.noticeUserName = "";
  formData.liableDepartmentId = "";
  formData.liableDepartmentName = "";
  formData.viewContent = "";
  formData.viewUserName = "";
  formData.viewTime = "";
  formData.viewStatus = "";
  formData.equipId = "";
  formData.equipCode = "";
  formData.equipName = "";
  formData.productId = "";
  formData.productCode = "";
  formData.productName = "";
  formData.materialNo = "";
  formData.batchNo = "";
  formData.abnormalNum = "";
  formData.judgeUserName = "";
  formData.judgeUserId = "";
  formData.judgeTime = "";
  formData.ratio = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
}

const loading = ref(false);

async function getdetails() {
  let sondetails = await request({
    url: "/qms/roknoticedoc/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.details = sondetails.data;
}

async function getViewDetails() {
  let { data } = await request({
    url: "/qms/roknoticeviewdetail/getListByNoticeId",
    method: "post",
    data: { noticeId: formData.id },
  }).finally(() => {
    loading.value = false;
  });
  formData.viewDetails = data;
}

async function getFiles(viewId, viewType) {
  let sondetails = await request({
    url: "/qms/rokmonitorworkfile/getFiles",
    method: "post",
    data: { monitorWorkId: viewId, monitorWorkFileType: viewType },
  }).finally(() => {
    loading.value = false;
  });
  detailData.files = sondetails.data;
  uploadKey.value = Math.random();
}
const openLogDetail = async (row) => {
  Object.assign(detailData, row);
  detailVisible.value = true;
  await getFiles(detailData.id, detailData.viewType);
};
let openEvent;
onBeforeUnmount(() => {
  openEvent();
});
onMounted(() => {
  openEvent = eventBusOn("OPEN-VIEW-DETAILS", async (row) => {
    Object.assign(formData, row);
    await getdetails();
    await getViewDetails();
  });
});
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}

// .formTable {
//   :deep(.el-form-item) {
//     margin-right: 0 !important;
//   }
// }

:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}

:deep.el-input.el-input--default.el-input--suffix {
  // 固定宽度
  width: 190px !important;
}
</style>
